<!--
  标签表格列组件 - 支持以标签方式显示表格值
  
  使用示例：
  1. 基础用法：
  <TableTagColumn prop="status" label="状态" />
  
  2. 使用标签类型映射：
  <TableTagColumn 
    prop="status" 
    label="状态" 
    :tag-type-map="{ '1': 'success', '0': 'danger', '2': 'warning' }"
  />
  
  3. 使用自定义标签类型获取函数：
  <TableTagColumn 
    prop="status" 
    label="状态" 
    :tag-type-getter="(value, row) => {
      if (value === '1') return 'success'
      if (value === '0') return 'danger'
      if (row.isVip) return 'warning'
      return 'info'
    }"
  />
  
  4. 使用自定义显示文本：
  <TableTagColumn 
    prop="status" 
    label="状态" 
    :text-getter="(value, row) => {
      if (value === '1') return '启用'
      if (value === '0') return '禁用'
      return value
    }"
  />
-->
<template>
  <el-table-column
    v-bind="$attrs"
    :prop="prop"
    :label="label"
    :width="width"
    :min-width="minWidth"
    :align="align"
    :header-align="headerAlign"
    :show-overflow-tooltip="showOverflowTooltip"
    :fixed="fixed"
  >
    <template #default="scope">
      <el-tag
        v-if="displayValue(scope.row)"
        :type="getTagType(scope.row)"
        :size="size"
        :effect="effect"
        :color="getTagColor(scope.row)"
        :hit="hit"
        :round="round"
        :closable="closable"
        @close="handleClose(scope.row, scope.$index)"
      >
        {{ displayValue(scope.row) }}
      </el-tag>
      <span v-else-if="showEmpty">
        {{ emptyText }}
      </span>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import { ElTableColumn, ElTag } from 'element-plus'

interface Props {
  // 表格列属性
  prop?: string
  label?: string
  width?: string | number
  minWidth?: string | number
  align?: 'left' | 'center' | 'right'
  headerAlign?: 'left' | 'center' | 'right'
  showOverflowTooltip?: boolean
  fixed?: boolean | 'left' | 'right'

  // 标签相关属性
  // 自定义值获取函数，如果不提供则使用 prop 从 row 中获取
  valueGetter?: (row: any) => string | number
  // 自定义显示文本获取函数，如果不提供则直接显示值
  textGetter?: (value: string | number, row: any) => string
  // 标签类型映射 - 根据值映射到对应的标签类型
  tagTypeMap?: Record<string | number, 'success' | 'info' | 'warning' | 'danger' | 'primary'>
  // 自定义标签类型获取函数 - 优先级高于 tagTypeMap
  tagTypeGetter?: (
    value: string | number,
    row: any
  ) => 'success' | 'info' | 'warning' | 'danger' | 'primary'
  // 标签颜色映射 - 根据值映射到对应的标签颜色
  tagColorMap?: Record<string | number, string>
  // 自定义标签颜色获取函数 - 优先级高于 tagColorMap
  tagColorGetter?: (value: string | number, row: any) => string
  // 默认标签类型
  defaultTagType?: 'success' | 'info' | 'warning' | 'danger' | 'primary'
  // 标签大小
  size?: 'large' | 'default' | 'small'
  // 标签效果
  effect?: 'dark' | 'light' | 'plain'
  // 是否有边框
  hit?: boolean
  // 是否圆角
  round?: boolean
  // 是否可关闭
  closable?: boolean
  // 是否显示空值
  showEmpty?: boolean
  // 空值显示文本
  emptyText?: string
}

const props = withDefaults(defineProps<Props>(), {
  align: 'center',
  headerAlign: 'center',
  showOverflowTooltip: true,
  tagTypeMap: () => ({}),
  tagColorMap: () => ({}),
  defaultTagType: 'primary',
  size: 'default',
  effect: 'light',
  hit: false,
  round: false,
  closable: false,
  showEmpty: true,
  emptyText: '-'
})

const emit = defineEmits<{
  close: [row: any, index: number]
}>()

// 获取值
const getValue = (row: any): string | number => {
  if (props.valueGetter) {
    return props.valueGetter(row)
  }
  if (props.prop) {
    return row[props.prop]
  }
  return ''
}

// 获取显示的文本
const displayValue = (row: any): string => {
  const value = getValue(row)
  if (value === undefined || value === null || value === '') {
    return ''
  }

  // 如果有自定义文本获取函数，使用它
  if (props.textGetter) {
    return props.textGetter(value, row)
  }

  // 否则直接显示值
  return String(value)
}

// 获取标签类型
const getTagType = (row: any): 'success' | 'info' | 'warning' | 'danger' | 'primary' => {
  const value = getValue(row)
  if (value === undefined || value === null || value === '') {
    return props.defaultTagType
  }

  // 优先使用自定义标签类型获取函数
  if (props.tagTypeGetter) {
    return props.tagTypeGetter(value, row)
  }

  // 其次使用标签类型映射
  if (props.tagTypeMap && props.tagTypeMap[value] !== undefined) {
    return props.tagTypeMap[value]
  }

  // 最后使用默认标签类型
  return props.defaultTagType
}

// 获取标签颜色
const getTagColor = (row: any): string | undefined => {
  const value = getValue(row)
  if (value === undefined || value === null || value === '') {
    return undefined
  }

  // 优先使用自定义标签颜色获取函数
  if (props.tagColorGetter) {
    return props.tagColorGetter(value, row)
  }

  // 其次使用标签颜色映射
  if (props.tagColorMap && props.tagColorMap[value] !== undefined) {
    return props.tagColorMap[value]
  }

  // 最后返回 undefined，使用默认颜色
  return undefined
}

// 处理关闭事件
const handleClose = (row: any, index: number) => {
  emit('close', row, index)
}
</script>
